<!DOCTYPE html>
<html ng-app="myApp" lang="en">
  <head>
    <title>Sails+Angular+UIRouter </title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Viewport mobile tag for sensible mobile support -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">

    
    <!--  
        Stylesheets and Preprocessors
        ==============================

        You can always bring in CSS files manually with `link` tags, or asynchronously
        on the client using a solution like AMD (RequireJS).  Or, if you like, you can
        take advantage of Sails' boilerplate asset management.

        By default, stylesheets from your `assets/linker/styles` folder are included
        here automatically.  Both CSS (.css) and LESS (.less) are supported.
        In production, your styles will be minified and concatenated into a single file.
        
        To customize any part of the built-in behavior, just edit your Gruntfile.
        For example, here are a few things you could do:
            
            + Change the order of your CSS files
            + Import stylesheets from other directories
            + Use a different or additional preprocessor, like SASS, SCSS or Stylus
    -->

    <!--STYLES-->
    <link rel="stylesheet" href="/linker/styles/lib/notification.css">
    <link rel="stylesheet" href="/linker/styles/custom.css">
    <link rel="stylesheet" href="/linker/styles/customAnimations.css">
    <link rel="stylesheet" href="/linker/styles/fbSpinner.css">
    <link rel="stylesheet" href="/linker/styles/fileInput.css">
    <link rel="stylesheet" href="/linker/styles/lib/animate.css">
    <link rel="stylesheet" href="/linker/styles/lib/bootstrap/blueImpPhotoGallery/blueimp-gallery.css">
    <link rel="stylesheet" href="/linker/styles/lib/bootstrap/blueImpPhotoGallery/bootstrap-image-gallery.css">
    <link rel="stylesheet" href="/linker/styles/lib/bootstrap/bootstrap-glyphicons.css">
    <link rel="stylesheet" href="/linker/styles/lib/bootstrap/bootstrap-theme.css">
    <link rel="stylesheet" href="/linker/styles/lib/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="/linker/styles/lib/bootstrap/bootstrap_ms.css">
    <link rel="stylesheet" href="/linker/styles/lib/bootstrap/font-awesome.css">
    <link rel="stylesheet" href="/linker/styles/lib/flippant/flippant.css">
    <link rel="stylesheet" href="/linker/styles/lib/ng-animation.css">
    <link rel="stylesheet" href="/linker/styles/offcanvas.css">
    <link rel="stylesheet" href="/linker/styles/uploadPanel.css">
    <!--STYLES END-->

    <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> -->
    
    
  </head>

  <body ng-class="{loginbg: $state.includes('login') || $state.includes('signup')}" ng-controller="rootCtrl">

<nav class="navbar navbar-default navbar-fixed-top fade" ng-class="{in: true}" role="navigation" ng-hide="$state.includes('login') || $state.includes('signup')">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" ui-sref="home">Sails + Angular</a>
    <!--<a class="navbar-brand" ui-sref="home">MyCoach</a>-->
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li ng-class="{active: $state.includes('home')}"><a ui-sref="home">Home</a></li>
      <li ng-class="{active: $state.includes('about')}"><a ui-sref="about">About</a></li>
      <li ng-class="{active: $state.includes('food')}" access-level="loggedIn"><a ui-sref="food">Foods</a></li>
      <li ng-class="{active: $state.includes('user')}" access-level="admin"><a ui-sref="user.list">Administration</a></li>
    </ul>

    <div ng-hide="authStatus.loggedIn" class="fade" ng-class="{in: !authStatus.loggedIn}" style="padding-right: 10px;">
      <button type="button" class="btn btn-default navbar-btn pull-right" ui-sref="login">Login</button>
      <button type="button" class="btn btn-success navbar-btn pull-right" ui-sref="signup" style="margin-right: 10px;">Sign up</button>
    </div>
    <div ng-show="authStatus.loggedIn" class="fade" ng-class="{in: authStatus.loggedIn}">
      <ul class="nav navbar-nav navbar-right">


        <li class="dropdown" style="margin-right: 10px;">
          <a href class="dropdown-toggle" data-toggle="dropdown"><img class="navbar-pic" ng-src="{{authStatus.pic}}" ng-show="authStatus.pic">
          <img class="navbar-pic" src="/images/placeholder_profile_pic.gif" ng-hide="authStatus.pic">
            {{authStatus.name}}<b class="caret" style="margin-left: 5px;"></b></a>
          <ul class="dropdown-menu">
            <li><a ui-sref="userPhotos">My Photos</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href ng-click="logout()">Logout</a></li>
          </ul>
        </li>


      </ul>
    </div>
  </div><!-- /.navbar-collapse -->
</nav>

<div notifications="top right"></div>


<!--This is where our angular templates are injected-->
<div  ui-view class="container" ng-class="{pageAnimation: !$state.includes('user.photos')}"></div>



    <!--
        Client-side Templates
        ========================

    		HTML templates are important prerequisites of modern, rich client applications.
        To work their magic, frameworks like Backbone, Angular, Ember, and Knockout require
        that you load these templates client-side.

        By default, your Gruntfile is configured to automatically load and precompile
        client-side JST templates in your `assets/linker/templates` folder, then
        include them here automatically.
        
        To customize this behavior to fit your needs, just edit your Gruntfile.
        For example, here are a few things you could do:

            + Import templates from other directories
            + Use a different template engine (handlebars, jade, dust, etc.)
            + Internationalize your templates using a server-side stringfile
              before they're served.
    -->

    <!--TEMPLATES-->
    <script type="text/javascript" src="/jst.js"></script>
    <!--TEMPLATES END-->


    <!--

      Client-side Javascript
      ========================

      You can always bring in JS files manually with `script` tags, or asynchronously
      on the client using a solution like AMD (RequireJS).  Or, if you like, you can 
      take advantage of Sails' boilerplate asset management.

      By default, filesin your `assets/linker/js` folder are included here
      automatically.  Both JavaScript (.js) and CoffeeScript (.coffee) are supported.
      In production, your scripts will be minified and concatenated into a single file.
      
      To customize any part of the built-in behavior, just edit your Gruntfile.
      For example, here are a few things you could do:
          
          + Change the order of your scripts
          + Import scripts from other directories
          + Use a different preprocessor, like TypeScript

    -->

    <!--SCRIPTS-->
    <script src="/linker/js/lib/jquery/jquery-1.10.2.js"></script>
    <script src="/linker/js/lib/jquery/jquery-ui.js"></script>
    <script src="/linker/js/lib/jquery/jquery.ui.touch-punch.js"></script>
    <script src="/linker/js/socket.io.js"></script>
    <script src="/linker/js/sails.io.js"></script>
    <script src="/linker/js/lib/angular/ng-file-upload/angular-file-upload-shim.js"></script>
    <script src="/linker/js/lib/angular/ng-file-upload/angular-file-upload-html5-shim.js"></script>
    <script src="/linker/js/lib/angular/angular.js"></script>
    <script src="/linker/js/lib/angular/angular-dragdrop.js"></script>
    <script src="/linker/js/lib/angular/angular-ui-router.js"></script>
    <script src="/linker/js/lib/angular/angular-resource.js"></script>
    <script src="/linker/js/lib/angular/angular-sails.js"></script>
    <script src="/linker/js/lib/angular/angular-contenteditable.js"></script>
    <script src="/linker/js/lib/angular/notification.js"></script>
    <script src="/linker/js/lib/angular/angular-animate.js"></script>
    <script src="/linker/js/lib/angular/ng-file-upload/angular-file-upload.js"></script>
    <script src="/linker/js/lib/bootstrap/bootstrap.js"></script>
    <script src="/linker/js/angular/app.js"></script>
    <script src="/linker/js/angular/controllers/UploadController.js"></script>
    <script src="/linker/js/lib/bootstrap/blueImpPhotoGallery/jquery.blueimp-gallery.min.js"></script>
    <script src="/linker/js/lib/bootstrap/blueImpPhotoGallery/bootstrap-image-gallery.js"></script>
    <script src="/linker/js/angular/controllers/FoodController.js"></script>
    <script src="/linker/js/angular/controllers/RootController.js"></script>
    <script src="/linker/js/angular/controllers/SessionController.js"></script>
    <script src="/linker/js/angular/controllers/UserController.js"></script>
    <script src="/linker/js/angular/controllers/uploadDemo.js"></script>
    <script src="/linker/js/angular/directives/AccessLevelDirective.js"></script>
    <script src="/linker/js/angular/directives/FlippantDirective.js"></script>
    <script src="/linker/js/angular/directives/LoadingIndicatorDirective.js"></script>
    <script src="/linker/js/angular/services.js"></script>
    <script src="/linker/js/angular/states/FoodStates.js"></script>
    <script src="/linker/js/angular/states/SessionStates.js"></script>
    <script src="/linker/js/angular/states/UserStates.js"></script>
    <script src="/linker/js/bootstrap/navbarFix.js"></script>
    <script src="/linker/js/lib/angular/angular-cookies.js"></script>
    <script src="/linker/js/lib/angular/raw.github.com/angular-ui/ui-router/master/release/angular-ui-router.js"></script>
    <script src="/linker/js/lib/angular/truncate.js"></script>
    <script src="/linker/js/lib/angular/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="/linker/js/lib/underscore/underscore.js"></script>
    <!--SCRIPTS END-->
  
  </body>
</html>
